<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>Mouse Stroke i18n Utility</title>
 <script src="http://www.google.com/jsapi"></script>
 <script>
  var _dir = 'mouse-stroke/_locales/';
  var _en, _lang;

  google.load("jquery", "1.4.1");
  google.setOnLoadCallback(function() {
    $.ajax({
      url: _dir + 'en/messages.json',
      cache: false,
      dataType: "text",
      success: function(data) {
        var msgid, row, input, div = $('#source'), lang;

        try { lang = eval('(' + data + ')'); }
        catch (e) { console.error(e.stack); return; }

        div.html('');
        for (msgid in lang) {
          row = document.createElement('p');
          input = document.createElement('textarea');
          row.innerHTML = '<code>' + msgid + '</code><br/>';
          input.id = msgid;
          input.value = lang[msgid].message;
          input.className = msgid.replace(/^([^_]+).*$/, '$1');
          row.appendChild(input);
          div.append(row);
        }
        _en = _lang = lang;
      },
      error: function() {
        console.log(arguments);
      },
      complete: function() {
        console.log(arguments);
      }
    });

    $('#locale').change(function(e) {
      _lang = {}
      $.ajax({
        url: _dir + e.target.value + '/messages.json',
        cache: false,
        dataType: "text",
        success: function(data) {
          var msgid, input, lang;

          try { _lang = lang = eval('(' + data + ')'); }
          catch (e) { console.error(e.stack); return; }

          for (msgid in lang) {
            input = $('#' + msgid);
            if (input.is('textarea')) {
              input.val(lang[msgid].message);
            }
          }
        },
        error: function() {
          console.log(arguments);
        },
        complete: function() {
          console.log(arguments);
        }
      });
    });

    $('#get-result').click(function(e) {
      var msgid, msg, lang = {}, result = $('#result');
      result.text('');
      for (msgid in _en) {
        lang[msgid] = _en[msgid];
        if (msg = $('#' + msgid).val())
          lang[msgid].message = msg;
      }
      result.text($('#locale').val() + '\n\n' + JSON.stringify(lang));
      var range = document.createRange();
      range.selectNode($('#result')[0]);
      window.getSelection().addRange(range);
    });

    $('#get-diff').click(function(e) {
      var msgid, msg, old, diff = '', result = $('#result');
      result.text('');
      for (msgid in _en) {
        msg = $('#' + msgid).val();
	old = _lang[msgid] && _lang[msgid].message || '';
        if (msg != old)
          diff += '|' + msgid + '\n|' +
                  JSON.stringify(old) + '\n|' +
                  JSON.stringify(msg) + '\n--\n\n';
      }
      result.text($('#locale').val() + '\n\n' + diff);
      var range = document.createRange();
      range.selectNode($('#result')[0]);
      window.getSelection().addRange(range);
    });
  });
 </script>
 <style>
   body { background: #f8f8f8; font-family: sans-serif }
   textarea { width: 95% }
   .text { height: 10em }
   em { color: red; font-style: normal; font-weight: bold }
   pre { border: dashed 2px red; margin: 1em; padding: 1em; white-space: pre-wrap }
 </style>
</head>
<body>
 <p>
  Lovely translators, thank you very much for your efforts, we got more than 20
  languages in less than 4 weeks, awesome!<br/>
  Now the only problem is: I'm OVERWHELMED by tons of emails everyday, most of
  them are revisions of already translated languages, and I have no idea about
  whether the revisions are better or worse because I'm not brilliant enough
  to master 24 languages, in most cases I have to ignore them and stick to
  the original versions.<br/>
  I think we have to change the way we collaborate to make sure that everyone's
  effort is not wasted.<br/>
  So, <em>I updated the guidelines and please act accordingly, otherwise I'll
  be unable to respond to your emails</em>.<br/>
  Thank you.
 </p>
 <ol>
  <li>Select the language you want to translate to</li>
  <li>If there are no translated texts yet, then you are the first translator of this language. Please translate them all <strong>and then</strong> click the <em>Get Result</em> button</li>
  <li>If thare are translated texts, then you are not the first transltor of this language. Please <strong>DO NOT</strong> re-do all the texts, just refine the ones you think you can improve, then hit the <em>Get Diff</em> button</li>
  <li>Copy & paste everything inside the red box into a text file, then send the file to &lt;vigacmoe@gmail.com&gt;</li>
  <li><strong>DO NOT</strong> translate anything enclosed by <strong>&lt;</strong> and <strong>&gt;</strong>, for example: <code>&lt;strong&gt;</code> or <code>&lt;a href="http://www.google.com/"&gt;</code></li>
  <li><strong>DO NOT</strong> translate anything between two dollar signs, for example: <code>$label$</code></li>
  <li><strong>DO NOT</strong> close or reload the page until you click the <strong>Get Result</strong> or <strong>Get Diff</strong> button and save the result, otherwise all your work will be <strong>LOST</strong></li>
 </ol>
 <p>
  Translate to:
  <select id="locale">
   <option value="en">English</option>
   <option value="am">Amharic</option>
   <option value="ar">Arabic</option>
   <option value="bg">Bulgarian</option>
   <option value="bn">Bengali</option>
   <option value="ca">Catalan</option>
   <option value="cs">Czech</option>
   <option value="da">Danish</option>
   <option value="de">German</option>
   <option value="el">Greek</option>
   <option value="en_GB">English (Great Britan)</option>
   <option value="en_US">English (United States)</option>
   <option value="es">Spanish</option>
   <option value="es_419">Spanish (Latin American)</option>
   <option value="et">Estonian</option>
   <option value="fi">Finnish</option>
   <option value="fil">Filipino</option>
   <option value="fr">French</option>
   <option value="gu">Gujarati</option>
   <option value="he">Hebrew</option>
   <option value="hi">Hindi</option>
   <option value="hr">Croatian</option>
   <option value="hu">Hungarian</option>
   <option value="id">Indonesian</option>
   <option value="it">Italian</option>
   <option value="ja">Japanese</option>
   <option value="kn">Kannada</option>
   <option value="ko">Korean</option>
   <option value="lt">Lithuanian</option>
   <option value="lv">Latvian</option>
   <option value="ml">Malayalam</option>
   <option value="mr">Marathi</option>
   <option value="nb">Norwegian Bokmal</option>
   <option value="nl">Dutch</option>
   <option value="or">Oriya</option>
   <option value="pl">Polish</option>
   <option value="pt">Portuguese</option>
   <option value="pt_BR">Portuguese (Brazil)</option>
   <option value="pt_PT">Portuguese (Portugal)</option>
   <option value="ro">Romanian</option>
   <option value="ru">Russian</option>
   <option value="sk">Slovak</option>
   <option value="sl">Slovenian</option>
   <option value="sr">Serbian</option>
   <option value="sv">Swedish</option>
   <option value="sw">Swahili</option>
   <option value="ta">Tamil</option>
   <option value="te">Telugu</option>
   <option value="th">Thai</option>
   <option value="tr">Turkish</option>
   <option value="uk">Ukrainian</option>
   <option value="vi">Vietnamese</option>
   <option value="zh">Chinese</option>
   <option value="zh_CN">Simplified Chinese</option>
   <option value="zh_TW">Traditional Chinese</option>
  </select>
 </p>
 <div id="source">Please wait...<br/>If you see this message for more than 5 minutes, please try to refresh the page.</div>
 <p>
  <button id="get-result">Get Result (I'm the first translator of the language)</button>
  <button id="get-diff">Get Diff (I improved the tanslation)</button>
 </p>
 <pre id="result"></pre>
</body>
</html>
